<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import router from '../../router'
import newModal from '@/components/svg/applicationNew.vue'
import { showMsg, showConfirm } from '@/assets/js/utils'
import { applicationList, applicationDel } from '@/assets/api/api'

const data_model = ref([])
const currentPage = ref(1)
const pageSize = 8
const total = ref(0)
const clientHeight = ref()
const clientWidth = ref()
const nodata = ref(false)
function getData() {
    const params = {
        page: currentPage.value,
        limit: pageSize,
    }
    applicationList(params).then((res) => {
        data_model.value = res.data.Items
        total.value = res.data.totalSize
        nodata.value = total.value == 0 ? true : false
    })
}
getData()

function handleCurrentChange(e) {
    currentPage.value = e
    getData()
}
function onAddSuccess() {
    getData(currentPage.value)
}
// 新建
const newModalData = ref()
const newModalVisible = ref(false)
const newModalVisibleTitle = ref('')
const upDataTime = ref('')
function newAction() {
    newModalData.value = {}
    newModalVisible.value = true
    newModalVisibleTitle.value = '新建'
}
function goDesign(item) {
    localStorage.removeItem('data_model')
    const { href } = router.resolve({
        path: '/edit',
        query: { data_model_id: item.id },
    })
    window.open(href, '_blank')
}
function goRun(item) {
    // router.push({
    //     name: 'preview',
    //     state: { dataModelId: item.id },
    // })
    const { href } = router.resolve({
        path: '/preview',
        query: {
            dataModelId: item.id,
        },
    })
    window.open(href, '_blank')
}
// 编辑
const edit = (item) => {
    newModalVisible.value = true
    newModalVisibleTitle.value = '编辑'
    newModalData.value = {
        name: item.name,
        describe: item.describe,
        id: item.id,
    }
}
const delect = (item) => {
    showConfirm({
        content: '您确定要删除该数据吗',
        onConfirm: () => {
            applicationDel({ id: item.id }).then(() => {
                showMsg('删除成功')
                getData()
            })
        },
    })
}
// const test = reactive({
//     data: [
//         {
//             id: 'power0hfgnNRZDt',
//             number: '',
//             value: 1,
//         },
//         {
//             id: 'powerndADABUAdr',
//             number: '',
//             value: 111,
//         },
//         {
//             id: 'powerzVvsqIWDOp',
//             number: '',
//             value: 3,
//         },
//     ],
// })
// const state = reactive({
//     timeInter: null, //定义定时器
// })
// state.timeInter = setInterval(() => {
//     console.log(data_model.value)
//     for (let i = 0; i < data_model.value.length; i++) {
//         // console.log(i)
//         for (let j = 0; j < data_model.value[i].done_json.length; j++) {
//             const rawData = data_model.value[i].done_json[j] //原始数据
//             const matchedData = test.data.find((item) => item.id === rawData.id) //匹配数据
//             if (matchedData) {
//                 matchedData.value++
//                 rawData.props.number.val = matchedData.value.toString()
//             }
//         }
//     }
// }, 5000)

// const ws = new WebSocket(config.socketUrl)
// function openSocket() {
//     //  //连接发生错误的回调方法
//     ws.onerror = function () {
//         console.log('ws连接发生错误')
//     }
//     //连接成功建立的回调方法
//     ws.onopen = function () {
//         console.log('ws连接成功')
//     }
//     //接收到消息的回调方法
//     ws.onmessage = function () {
//         console.log('更新')
//         getData(currentPage.value, formData)
//         // ws.close()
//     }
//     //连接关闭的回调方法
//     ws.onclose = function () {
//         console.log('ws连接关闭')
//     }
// }
const setItemRefs = (el) => {
    if (el) {
        if (el.$el) {
            nextTick(() => {
                clientHeight.value = el.$el.children[0].children[0].clientHeight
                clientWidth.value = el.$el.children[0].children[0].clientWidth
            })
        }
    }
}

onMounted(() => {
    setItemRefs()
    visibilitychange()
})
const visibilitychange = () => {
    document.addEventListener('visibilitychange', function () {
        // 页面在后台标签页中或者浏览器最小化
        if (document.visibilityState === 'hidden') {
            console.log('离开')
        } else {
            upDataTime.value = new Date().getTime()
        }
    })
}
onUnmounted(() => {
    // clearInterval(state.timeInter) //销毁
    // state.timeInter = null
})
</script>
<template>
    <div class="filter-box white-box d-flex">
        <div class="el-form-item">
            <el-button type="primary" @click="newAction">新增</el-button>
        </div>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto flex-column-bw">
        <el-empty description="暂无数据" v-if="nodata" />
        <el-row :gutter="12" v-else>
            <el-col
                :span="6"
                v-for="item in data_model"
                :key="item.id"
                class="mb-15"
            >
                <el-card
                    class="flex-column-bw"
                    shadow="hover"
                    :ref="(el) => setItemRefs(el)"
                    :body-style="{ padding: '0px' }"
                >
                    <webtopo-svg-preview
                        :svgWidth="clientWidth"
                        :svgHeight="clientHeight"
                        :dataModelId="item.id"
                        :canvas-drag="false"
                        :key="upDataTime"
                    ></webtopo-svg-preview>
                    <div class="card-title">
                        <div class="fs-16">{{ item.name }}</div>
                        <div class="color-gray">{{ item.describe }}</div>
                    </div>
                    <el-row class="mb-4" style="padding: 10px">
                        <el-button size="small" @click="goDesign(item)"
                            >设计</el-button
                        >
                        <el-button size="small" @click="goRun(item)"
                            >运行</el-button
                        >
                        <el-button size="small" @click="edit(item)"
                            >编辑</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="delect(item)"
                            >删除</el-button
                        >
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <div class="fl-bw">
            <div></div>
            <el-pagination
                small
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
                v-if="total > 0"
            />
        </div>
    </div>
    <newModal
        v-model:visible="newModalVisible"
        v-model:dataModel="dataModel"
        :title="newModalVisibleTitle"
        v-if="newModalVisible"
        :newModalData="newModalData"
        @success="onAddSuccess"
    ></newModal>
</template>
<style lang="scss" scoped>
::v-deep(.el-card__body) {
    height: 1.538542rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .canvas {
        height: 75%;
    }
    .card-title {
        border: 1px solid #e4e7ed;
        padding: 0 0.052083rem;
    }
    .el-row {
        justify-content: flex-end;
    }
}
</style>
<style></style>
